<div class="dashboard-container">
  @if ((bookState$ | async)?.loaded === false) {
    <div class="flex items-center justify-center h-full">
      <p-progressSpinner
        styleClass="spinner center-spinner"
        [style]="{'width': '60px', 'height': '60px'}"
        strokeWidth="3"
        fill="transparent"
        animationDuration="1.5s">
      </p-progressSpinner>
    </div>
  }
  @if ((bookState$ | async)?.loaded === true) {
    <div class="dashboard">
      <div class="w-full">
        @if (isLibrariesEmpty$ | async) {
          <div class="dashboard-no-library">
            @if ((userService.userState$ | async)?.user?.permissions; as permissions) {
              <div>
                @if (permissions.admin || permissions.canManipulateLibrary) {
                  <div>
                    <h1 class="no-library-header">
                      Welcome to BookLore!<br>
                      Let's create your first library
                    </h1>
                    <p class="text-gray-300 mb-8 mx-auto leading-relaxed">
                      A library is where all your books live. Start building your digital collection today!
                    </p>
                    <p-button
                      label="Create Your Library"
                      icon="pi pi-plus"
                      styleClass="p-button-rounded p-button-outlined"
                      (click)="createNewLibrary()">
                    </p-button>
                  </div>
                }
              </div>
            }
          </div>
        } @else {
          <app-dashboard-scroller
            [books]="lastReadBooks$ | async"
            [bookListType]="'lastRead'"
            [title]="'Continue Reading'">
          </app-dashboard-scroller>

          <app-dashboard-scroller
            [books]="latestAddedBooks$ | async"
            [title]="'Recently Added'">
          </app-dashboard-scroller>

          <app-dashboard-scroller
            [books]="randomBooks$ | async"
            [title]="'Discover Something New'">
          </app-dashboard-scroller>
        }
      </div>
    </div>
  }
</div>
